<template>
  <header>
    <router-link
      to="/homePage"
      class="navbar-brand d-flex align-items-center"
      @click="goHome"
    >
      <img
        src="@/assets/logo.png"
        alt="Logo"
        class="d-block align-text-top me-2 logo-image"
      />
      <img
        src="@/assets/images/font-logo.png"
        alt="Font-Logo"
        class="d-block d-none d-sm-inline logo-font"
      />
    </router-link>
  </header>
  <nav class="navbar navbar-expand-sm bg-light">
    <div class="container-fluid">
      <!-- 其他导航条内容 -->
      <button
        class="navbar-toggler d-block d-sm-none"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Navigation links -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav w-100 justify-content-center">
          <li class="nav-item flex-grow-1 text-center">
            <router-link
              to="/homePage"
              class="nav-link"
              active-class="active"
              exact
              >首页</router-link
            >
          </li>
          <li class="nav-item flex-grow-1 text-center">
            <router-link
              to="/laboratoryOverview"
              class="nav-link"
              active-class="active"
              exact
              >实验室概况</router-link
            >
          </li>
          <li class="nav-item flex-grow-1 text-center">
            <router-link
              to="/talentTeam"
              class="nav-link"
              active-class="active"
              exact
              >人才队伍</router-link
            >
          </li>
          <li class="nav-item flex-grow-1 text-center">
            <router-link
              to="/scientificResearch"
              class="nav-link"
              active-class="active"
              exact
              >科学研究</router-link
            >
          </li>
          <li class="nav-item flex-grow-1 text-center">
            <router-link
              to="/personnelTraining"
              class="nav-link"
              active-class="active"
              >人才培养</router-link
            >
          </li>
          <li class="nav-item flex-grow-1 text-center">
            <router-link
              to="/partyAndWork"
              class="nav-link"
              active-class="active"
              >党群工作</router-link
            >
          </li>
          <li class="nav-item flex-grow-1 text-center">
            <router-link
              to="/talentIntroduction"
              class="nav-link"
              active-class="active"
              >人才引进</router-link
            >
          </li>
          <li class="nav-item flex-grow-1 text-center">
            <router-link
              to="/cooperationAndExchange"
              class="nav-link"
              active-class="active"
              >合作交流</router-link
            >
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: "NavbarView",
  methods: {
    goHome() {
      // 如果你使用的是vue-router，点击时会自动跳转到指定路径，这里可以添加额外逻辑
    },
  },
};
</script>

<style scoped>
@import url("@/assets/css/common.css");
header {
  display: grid;
  place-items: left;
  margin-left: 3%;
}
/* logo内容 */
.logo-image {
  width: 5rem;
  height: auto;
}
.logo-font {
  width: 27rem;
  height: auto;
}
nav {
  margin-bottom: 10px;
  color: var(--site-color);
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
}
/* 消除bootstrap导航栏和关闭按钮默认的边框和阴影 */
.navbar-toggler,
.btn-close {
  border: none;
  box-shadow: none;
}
.navbar-toggler:focus,
.btn-close:focus,
.btn-close:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
@media screen and (min-width: 768px) {
  .nav-link {
    font-size: 1.2rem;
  }
}

.nav-link:hover,
.nav-link:active {
  background-image: linear-gradient(
    to top,
    rgba(26, 2, 126, 0.5) 0%,
    var(--site-color) 100%
  );
  color: #fff !important;
}

@media (max-width: 576px) {
  .navbar-toggler-icon {
    /* 导航栏汉堡包图标 */
    background-image: url("@/assets/images/nav-logo.png");
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 576px) {
  .nav-link {
    text-align: center;
    font-size: 1rem;
  }
  .nav-link:hover {
    background-color: var(--site-color);
    color: #fff;
  }
}
</style>